<template>
	<div>
	<el-form :inline="true" :model="formInline" class="demo-form-inline">
 <el-form-item label="报损时间">
    <el-col :span="11">
      <el-form-item prop="date1">
        <el-date-picker type="date" placeholder="开始日期" v-model="formInline.date1" style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col :span="2">-</el-col>
    <el-col :span="11">
      <el-form-item prop="date2">
        <el-date-picker type="date" placeholder="结束日期" v-model="formInline.date2" style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
      </el-form-item>
    </el-col>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="Onsubmit()">查询</el-button>
  </el-form-item>
</el-form>
	<div class="echart" id="mychart" :style="myChartStyle">
	</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts'
import resize from '@/utils/resize'
import {purCount} from '@/api/purchase'

// 饼状环形圆角图
export default {
  data() {
    return {
      xData: [], //横坐标
      yData: [], //数据
      formInline: {
        date1:'',
        date2:''
      },
      myChartStyle: { float: "left", width: "50%", height: "400px" ,color:"blue"} //图表样式
    };
  },
  mounted() {
  	purCount({'typeName':1}).then((res)=>{
  		this.xData=res.data.x;
  		this.yData=res.data.y;
  		this.initEcharts(this.xData,this.yData);
  	})
  },
  methods: {
    initEcharts(x,y) {
      // 基本柱状图
      const option = {
      	tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
        xAxis: {
          data: x
        },
        yAxis: {},
        series: [
          {
            type: "bar", //形状为柱状图
            data: y,
            color:"green"
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    Onsubmit(){
    	purCount({
    	'beginDate':this.formInline.date1,
        'endDate':this.formInline.date2
    	}).then((res)=>{
  		this.xData=res.data.x;
  		this.yData=res.data.y;
  		this.initEcharts(this.xData,this.yData);
  	})
    }
  }
};
</script>

<style>
</style>